<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./CSS/reset.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>网易新闻右侧新闻列表训练</title>
    <style>
        a{
            text-decoration: none;
        }
        .container{
            width: 300px;
            border-top: 1px solid #dddddd;
            margin: 100px auto;
        }
        .title{
            border-top:1px solid #f34540;
            height: 40px;
            line-height: 40px;
            display: inline-block;
            margin-top: -1px;
        }
        .title a{
            color: #000;
            font-weight: bold;
        }
        .title a:hover{
            color: #f34540;
        }
        .img{
            height: 150px;
        }
        .img h2{
            margin-top: -25px;
            color:#fff;
            font-weight: bold;
            padding-left: 8px;
        }
        .news-list{
            margin-top: 15px;
        }
        .item{
            height: 30px;
        }
        .item a{
            color: #666;
            font-size: 14px;
        }
        
        .item a:hover{
            color: #f34540;;
        }
        .item a::before{
            color:rgb(218,218,218);
            content: "■";
            font-size: 8px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="title">
            <a href="#">财经</a>
        </div>
        <div class="img">
            <a href="">
                <img src="./imgs/网易新闻图片.png" alt="">
                <h2>不靠谱的基金?</h2>
            </a>
        </div>
        <ul class="news-list">
            <li class="item"><a href="#">美国撤销两家中国电信公司在美运营授权</a></li>
            <li class="item"><a href="#">黄峥你凭什么退？扭亏为盈？并没有</a></li>
            <li class="item"><a href="#">道指涨0.58%创新高 拼多多跌7.1%</a></li>
            <li class="item"><a href="#">虚惊！美联储重磅宣布 预计2023年前不加息</a></li>
        </ul>

    </div>
</body>
</html>